<template>
	<div class="xitongpeizhi">
    <left></left>
    <div class="right">
      <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/xitongpeizhi' }">系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>系统配置</el-breadcrumb-item>
        </el-breadcrumb>
        <top></top>
      </div>
      <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
        <!-- 1 -->
        <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
          <div><img src="../../../static/img/xitong3.png" style="width: 22px; margin-right: 10px;"></div>
          <div>系统信息设置</div>
        </div>
        <div class="baibeijing" style=" width: 780px; margin-bottom: 20px;">
          <el-form ref="form" :model="form">
            <el-form-item>
              <div>店铺名称</div>
              <div><el-input v-model="form.shop_name" style="width: 360px;"></el-input></div>
            </el-form-item>
            <div class="flex">
              <el-form-item style="margin-right: 20px;">
                <div>设置左上角LOGO</div>
                <div><chuantu :widths="'100px'" :widths2="'100px'" :heights2="'100px'" :heights="'100px'" :buyaoshanchu="true" :imgs="form.left_logo" @getimg="getimg4" v-if="relo"></chuantu></div>
              </el-form-item>
              <el-form-item style="margin-right: 20px;">
                <div>登录页LOGO</div>
                <div><chuantu :widths="'100px'" :widths2="'100px'" :heights2="'100px'" :heights="'100px'" :buyaoshanchu="true" :imgs="form.system_logo" @getimg="getimg" v-if="relo"></chuantu></div>
              </el-form-item>
              <el-form-item>
                <div>登录页背景图</div>
                <div><chuantu4 :widths="'100px'" :widths2="'100px'" :heights2="'100px'" :heights="'100px'" :buyaoshanchu="true" :imgs="form.login_background" @getimg="getimg2" v-if="relo"></chuantu4></div>
              </el-form-item>
            </div>
          </el-form>
        </div>

        <!-- 3 -->
        <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
          <div><img src="../../../static/img/bianji1.png" style="width: 22px; margin-right: 10px;"></div>
          <div>分销商注册设置</div>
        </div>


        <div class="baibeijing" style=" width: 780px; margin-bottom: 20px;">
          <div>
              <el-radio v-model="form.distributor" label="0">任何人可以注册为我的分销商</el-radio>
              <el-radio v-model="form.distributor" label="1">需邀请码才注册成为我的分销商</el-radio>
          </div>
          <div style="margin: 10px 0;">我的分销商注册邀请码</div>
          <div class="flexc" >
            <div class="flexc" style="background: rgb(246, 248, 251);border: 1px solid rgb(227, 232, 241);border-radius: 20.5px; height: 41px; margin-right: 10px;">
              <div style="padding: 0 20px; color: rgb(175, 179, 188); font-size: 14px;">邀请码</div>
              <div style="width: 160px; font-size: 14px; color: rgb(2, 12, 29);">{{yaoqingma}}</div>
              <i  style="padding: 0 20px; cursor: pointer;" class="el-icon-refresh-right" @click="gengxinyaoqingma"></i>
            </div>
            <div><el-button type="primary" plain round @click="copy(yaoqingma)">复制</el-button></div>
          </div>
        </div>
        <!-- 4 -->
        <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
          <div><img src="../../../static/img/bianji1.png" style="width: 22px; margin-right: 10px;"></div>
          <div>联系客服设置</div>
        </div>

        

        <div class="baibeijing" style=" width: 780px; margin-bottom: 20px;">
          <div style="margin: 10px 0;">联系电话</div>
          <div class="flexc">
            <div><el-input v-model="form.mobile" style="width: 360px; margin-right: 20px;"></el-input></div>
          </div>
          <div style="width: 100px;">
            <div style="margin: 10px 0;">二维码</div>
            <div ><chuantu :widths="'100px'" :heights="'100px'" :widths2="'100px'" :heights2="'100px'" :imgs="form.qrcode" @getimg="getimg3" v-if="relo"></chuantu></div>
          </div>
        </div>

        <div><el-button type="primary" style="margin-top: 40px; width: 140px;" round @click="baocunpeizhi">保存</el-button></div>

        <!-- 2 -->
        <div class="flexc" style="font-size: 16px; font-weight: bold; margin:50px 0  20px 0;">
          <div><img src="../../../static/img/bianji1.png" style="width: 22px; margin-right: 10px;"></div>
          <div>绑定的敢探号店铺设置</div>
        </div>
        <div class="baibeijing" style=" width: 780px; margin-bottom: 50px;">

          <div class="flexc">
            <div style="font-size: 16px; font-weight: bold;">我的系统秘钥</div>
            <div style="margin-left: 20px; cursor: pointer;"><img src="../../../static/img/biyan.png" style="width: 20px;" v-if="biyan" @click="zhengyan" /></div>
            <div style="margin-left: 20px; cursor: pointer;"><img src="../../../static/img/zhengyan.png" style="width: 20px;" v-if="!biyan" @click="biyan2" /></div>
          </div>

          <div style="margin: 10px 0;">{{xitongmiyao}}</div>

          <div class="flex" style="background: rgb(246, 248, 251); border-radius: 5px; width: 210px; font-size: 12px; padding: 10px;" v-if="!form.apiToken">
            <div style="color: rgb(175, 179, 188); margin-right: 10px;">还未绑定敢探号店铺</div>
            <div style="color: rgb(0, 90, 255); cursor: pointer;" @click="xianshi = !xianshi">绑定店铺</div>
          </div>
          <div style="margin: 10px 0;" v-if="xianshi">敢探号店铺秘钥</div>
          <div class="flexc" v-if="xianshi">
            <div><el-input v-model="gthtoken" style="width: 360px; margin-right: 20px;"></el-input></div>
            <div><el-button type="primary" round plain @click="gengxingthtoken" style="margin-right: 20px;">确定绑定</el-button></div>
            <div style="color: rgb(0, 90, 255); font-size: 12px;" @click="ruhe_log = true">如何获取敢探号秘钥？</div>
          </div>
        </div>
		<!-- <footers></footers> -->
      </div>

    </div>
    <el-dialog title="如何获取敢探号秘钥" :visible.sync="ruhe_log" width="1440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div>
        <div style="color: rgb(93, 93, 93); margin-bottom: 10px;">请使用主账号登录敢探号系统，在有商家设置处找到个人版分销系统绑定，点开眼睛复制秘钥</div>
        <img src="../../../static/img/xitong6.png" style="width: 100%;">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ruhe_log = false">关闭</el-button>
      </span>
    </el-dialog>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import chuantu from '@/components/chuantu.vue'
  import chuantu4 from '@/components/chuantu4.vue'
	export default {
		name: 'xitongpeizhi',
    components:{
      left,chuantu,top,footers,chuantu4
    },
		data() {
			return {
        form:{},
        relo:true,
        xianshi:false,
        yaoqingma:"",
        apitoken:"",
        ruhe_log:false,
        biyan:true,
        xitongmiyao:"********",
        gthtoken:""
			}
		},
		created() {
      this.getpeizhi()
      this.getyaoqingma()
      this.getgthtoken()
		},
		mounted() {

		},
		methods: {
      zhengyan:function(){
        this.xitongmiyao = this.form.apiToken
        this.biyan = false
      },
      biyan2:function(){
        this.xitongmiyao = "********"
        this.biyan = true
      },

      getimg:function(item){
        this.form.system_logo = item
      },
      getimg2:function(item){
        this.form.login_background = item
      },
      getimg3:function(item){
        this.form.qrcode = item
      },
      getimg4:function(item){
        this.form.left_logo = item
      },
      getpeizhi:function(){
        axios.get('/agent/system/get').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.form = response.data.data
            this.form.distributor = this.form.distributor.toString()
            this.relo = false
            this.$nextTick(()=>{
              this.relo = true
            })
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      getgthtoken:function(){
        axios.get('/agent/sys/info').then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data.gth_id){
              this.yibangding = true
            }

        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })

      },
      gengxingthtoken:function(){
        axios.post('/agent/system/gthtoken/update',{gth_id:this.gthid,gth_token:this.gthtoken}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.getgthtoken()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      getyaoqingma:function(){
        axios.get('/agent/system/inv/get').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.yaoqingma = response.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      gengxinyaoqingma:function(){
        axios.post('/agent/system/inv/update').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.getyaoqingma()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      baocunpeizhi:function(){
        axios.post('/agent/system/config',this.form).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('保存成功');
            this.getpeizhi()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      }
		}
	}
</script>


<style scoped lang="less">
  .xitongpeizhi{
    .xiugai{background: rgb(228, 237, 255); border-radius: 14px; height: 28px; width: 52px; color: rgb(0, 90, 255); font-size: 12px;}
    /deep/ .t .el-input__inner{ border: 0 !important; padding: 0 !important; height: 50px !important; line-height: 50px !important;}
    /deep/ .tt .el-input__inner{ border: 0 !important;  height: 50px !important; line-height: 50px !important;}
    /deep/ .el-radio{ display: block; margin-bottom: 20px;}
    .t2{
      /deep/ .el-input__inner{ border-radius: 0 !important; border: 0 !important; height: 39px !important; line-height: 39px !important;;}
    }
  }
</style>
